<template>
    <div class="siteContent">
      <top >
       <template #siteTop>
        <div class="title" >{{ title }}</div> 
       </template>
      </top>
      <navTitle >
                   <template #siteTitle="parentName">
            <div class="top" >
            <div class="title clear" >
                <ul>
                    <li v-for="(item,index) in parentName.childrenName" :key="index" @click="flag=!flag" >
                        <router-link to="">{{ item }}</router-link>
                    </li>
                </ul>
            </div>
            <div class="search">
                <input type="text" placeholder="搜索现场">
            </div>
        </div>
  </template>
      </navTitle>
        <!-- <main-box :childTabs="tabs" :childLists="lists"></main-box> -->
        <main-box>
          <template #mainBoxTabs="parentName">
           
                      <div class="tab" v-if="flag">
            <div class="item"  v-for="(tab,index) in parentName.childName" :key="index">{{ tab }}</div>
         
        </div>
           </template>
           <template #mainBoxLists="parentName">
                  <div class="mainCon">
             <div class="lists"  >
                  <div class="item" v-for="(item,index) in parentName.childName" :key="index"  @click="active=!active">
                     
                          <div class="img">
                              <img :src="item.img" alt=""  >
                          </div>
                    
                      <div class="text"  >
                          <div class="t1">{{ item.t1 }}</div>
                          <div class="t2">{{ item.t2 }}<span>&nbsp;</span>{{ item.t3 }}</div>
                      </div>
                  </div>
         
             </div>
                
         </div> 
           </template>
        </main-box>
        <cover v-if="active">
 
          <template #del>
         
                  <div class="del" @click="goBack"></div>
            
          </template>
                   <template #showImg="parentName">

  
          </template>
          <template #sidebar="parentName">
            <div>
              
            </div>
          </template>
        </cover>
    </div>
</template>
<script>

import top from "../top";
import navTitle from "../navTitle";
import mainBox from "../mainBox";
import cover from "../cover";
export default {

  data() {
    return {
      title: "现场布置",
      flag: false,
      active: false,
    
     
    };
  },
  methods: {
    goBack() {
      this.active = false;
    }
  },
  components: {
    top,
    navTitle,
    mainBox,
    cover

  }

};
</script>
<style  scoped>
@import url("../../assets/font/iconfont.css");
@import url("../../assets/css/base.css");
.siteContent {
  position: relative;
}
/deep/ header .logo::before {
  content: "\e622";
  font-family: "iconfont";
  font-size: 20px;
  color: #fff;
  line-height: 60px;
}
/deep/ header .logo img {
  display: none;
}
/deep/ header .logo a {
  display: none;
}
/deep/ header .title {
  width: 100px;
  height: 100%;
  text-align: center;
  color: #fff;
  font-size: 20px;
  margin: 0 auto;
}
.nav .top .title li:nth-child(2)::after {
  content: "\e60b";
  font-family: "iconfont";
  font-size: 25px;
  position: absolute;
  left: 80%;
  top: -20px;
  color: #e7367d;
}
.nav .top .title li:nth-child(3)::after {
  content: "\e6e9";
  font-family: "iconfont";
  font-size: 25px;
  position: absolute;
  left: 80%;
  top: -20px;
  color: #fff;
}
.del {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 35px;
  top: 40px;
  background-color: #121212;
}
.del::before {
  content: "\e62d";
  font-family: "iconfont";
  font-size: 16px;
  color: #fff;
  text-align: center;
  line-height: 50px;
}

/* .thumb-example {
  height: 480px;
  background-color: black;
}

.swiper .swiper-slide {
  background-size: cover;
  background-position: center;
}
.swiper .swiper-slide .slide-1 {
  background-image: url("../../assets/images/example/1.jpg");
}
.swiper .swiper-slide .slide-2 {
  background-image: url("../../assets/images/example/2.jpg");
}
.swiper .swiper-slide .slide-3 {
  background-image: url("../../assets/images/example/4.jpg");
}
.swiper .swiper-slide .slide-4 {
  background-image: url("../../assets/images/example/5.jpg");
}
.swiper .swiper-slide .slide-5 {
  background-image: url("../../assets/images/example/6.jpg");
}

.swiper .gallery-top {
  height: 80%;
  width: 100%;
}
.swiper .gallery-thumbs {
  height: 20%;
  box-sizing: border-box;
  padding: 20px 0;
}
.swiper .gallery-thumbs .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
}
.swiper .gallery-thumbs .swiper-slide-active {
  opacity: 1;
} */
</style>

